<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<title></title>
	<link rel="stylesheet" href="styles/nanoscroller.css">
	<link rel="stylesheet" href="styles/idangerous.swiper.min.css">
	<link rel="stylesheet" href="styles/reset.css">
	<link rel="stylesheet" href="styles/common.css">
	<link rel="stylesheet" href="styles/product.css">
	<link rel="stylesheet" href="styles/newIn.css">
	<link rel="stylesheet" href="styles/detail.css">
</head>
<style type="text/css">
	.main-left .cut {
	    height: 1300px;
	}
</style>
<body>
<div class="main-container">
<!-- 左边 -->
<!--include "block/left.html"-->
<!-- 右边 -->
<div class="pull-right main-right">
	<!--include "block/top.html"-->
	<div class="main">
		<div class="product-info clearfix">
			<div class="big-img">
				<img src="images/detailid.jpg">
			</div>
			<ul class="small-list">
				<li class="current"><img src="images/small.jpg"></li>
				<li><img src="images/small.jpg"></li>
				<li><img src="images/small.jpg"></li>
				<li><img src="images/small.jpg"></li>
			</ul>
			<div class="particulars">
				<h2 class="pro-name">Boyfriend Coat In Amber</h2>
				<p class="subtitle">Subtitle</p>
				<p class="price">$1180.00  <span>$1200.00</span></p>
				<div style="position: relative;margin-bottom: 4%;">
					<div class="size">
						<span>SIZE</span>
						<select>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>
					<div class="QTY">
						<span>QTY&nbsp;&nbsp;&nbsp;</span><div>1</div>
					</div>
				</div>
				<div>
					<div class="btn1">Add to Cart</div>
					<div class="btn2">My personalization</div>
				</div>
				<p>120 Piece remaining</p>
				<p>Free Shipping & Returns Orders Over $100</p>
				<div class="detail-D">
					<a href="" class="current">Description</a>
					<a href="">Design&nbsp;story</a>
					<a href="">Delivery</a>
					<div class="detail-content">
						<p>from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from from</p>
					</div>
					<ul>
						<li><span></span>Crewneck sweater in Camel</li>
						<li><span></span>Ribbed collar</li>
						<li><span></span>Raglan sleeves</li>
						<li><span></span>Ribbed cuffs</li>
						<li><span></span>All-over rib detailinf</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="headline"></div>
		<div class="product-list">
			<div class="swiper-container">
			  <div class="swiper-wrapper">
			    <div class="swiper-slide">
			    <ul class="product-item">
			    	<li onclick="javascript:window.open('detail.html')">
				    	<div class="item-img"><img src="images/news1.jpg"></div>
				    	<p class="title">Studio Visit: KARAStudio Visit: KARAStudio Visit: KARAStudio Visit: KARA</p>
				    	<p class="data">$10000</p>
			    	</li>
			    	<li onclick="javascript:window.open('detail.html')">
			    		<div class="item-img"><img src="images/news1.jpg"></div>
				    	<p class="title">Studio Visit: KARA</p>
				    	<p class="data">$10000</p>
				    </li>
			    	<li onclick="javascript:window.open('detail.html')">
			    		<div class="item-img"><img src="images/news1.jpg"></div>
				    	<p class="title">Studio Visit: KARA</p>
				    	<p class="data">$10000</p>
				    </li>
			    	<li onclick="javascript:window.open('detail.html')">
			    		<div class="item-img"><img src="images/news1.jpg"></div>
				    	<p class="title">Studio Visit: KARA</p>
				    	<p class="data">$10000</p>
				    </li>
			    	<li onclick="javascript:window.open('detail.html')">
			    		<div class="item-img"><img src="images/news1.jpg"></div>
				    	<p class="title">Studio Visit: KARA</p>
				    	<p class="data">$10000</p>
				    </li>
			    </ul>
			    </div>
			  </div>
			</div>
			<img src="images/arr_left.png" class="swiper-btn prev">
			<img src="images/arr_right.png" class="swiper-btn next">
		</div>
	</div>
</div>
<!-- 底部 -->
<!--include "block/bottom.html"-->
</div>
<div class="pop">
	<div class="pop-main">
		<img src="images/close.png" class="close">
		<div class="nano">
		<div class="content">
			<table>
				<tr>
					<td class="head">Item:</td>
					<td>
						<div class="country width-100">
							<select>
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
							</select>
							<label></label>
						</div>
					</td>
				</tr>
				<tr>
					<td class="head">Size:</td>
					<td>
						<div class="country width-100">
							<select>
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
							</select>
							<label></label>
						</div>
					</td>
				</tr>
				<tr>
					<td class="head">Quantity:</td>
					<td>
						<div class="country width-100">
							<select>
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
							</select>
							<label></label>
						</div>
					</td>
				</tr>
				<tr>
					<td class="head">Delivered time required:</td>
					<td>
						<div class="country width-100">
							<select>
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
							</select>
							<label></label>
						</div>
					</td>
				</tr>
				<tr>
					<td class="head" style="vertical-align: top;padding-top: 19px">Upload photos:</td>
					<td style="height: 260px">
						<div class="upload">
							<input type="file"/>
						</div>
						<input type="checkbox" />I have the rights to use these images.
					</td>
				</tr>
				<tr>
					<td class="head">Your name:</td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td class="head">Your phone:</td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td class="head">Your email:</td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><div class="btn">CONFIRM</div></td>
				</tr>
			</table>
			</div>
		</div>
	</div>
</div>
	<script type="text/javascript" src="scripts/vendor/jquery.min.js"></script>
	<script type="text/javascript" src="scripts/placeholder.js"></script>
	<script type="text/javascript" src="scripts/jquery.nanoscroller.js"></script>
	<script type="text/javascript" src="scripts/vendor/idangerous.swiper.min.js"></script>
	<script type="text/javascript" src="scripts/common.js"></script>
</body>
	<script type="text/javascript">
		$(function() {
			var mySwiper = new Swiper('.swiper-container',{
				autoplay : 5000,//可选选项，自动滑动
				loop : true,//可选选项，开启循环
				calculateHeight : true
			})
			$('.prev').click(function(){
				mySwiper.swipePrev(); 
			})
			$('.next').click(function(){
				mySwiper.swipeNext(); 
			})
			// 弹层关闭按钮
			$('.close').on('click',function(){
				$(this).parents('.pop').fadeOut();
			});

			$(".country").on("change", function() {
			    var o;
			    var opt = $(this).find('option');
			    opt.each(function(i) {
			        if (opt[i].selected == true) {
			            o = opt[i].innerHTML;
			        }
			    })
			    $(this).find('label').html(o);
			});
			
			$(window).resize(function(){
				var h=$(window).height()-108-95;
				$('.nano').css({'height':h+'px'});
				$('.nano').nanoScroller();
			}).resize();


			/////////////
			// 小图片点击事件 //
			/////////////
			$('.small-list li').on('click',function(){
				$(this).addClass('current').siblings('li').removeClass('current');
			});


			$(".size").on("change", function() {
		    var o;
		    var opt = $(this).find('option');
		    opt.each(function(i) {
		        if (opt[i].selected == true) {
		            o = opt[i].innerHTML;
		        }
		    })
		    $(this).find('span').html(o);
		});
		var pop=$('.pop');
		$('.particulars .btn2').on('click',function(){
			pop.fadeIn();
			$('.nano').nanoScroller();
		});
		$('.particulars .btn1').on('click',function(){
			window.open('payment.html');
		});
		})
	</script>

</html>
